/*
用于存储JS的工具函数
函数封装,遵循小而美的原则
1.使用方便,灵活复用2.实现功能的函数代码简洁3.函数的性能
心法:复用封函数,变化改参数
*/

/**
 * @description 通过指定的选择器获取对应的函数节点
 * @param {string} selector 选择器
 * @returns 函数节点
 */

/*
function $(selector) {
	return document.querySelector(selector);
}
*/

// 方法二:使用一个多功能的获取节点的方法,大神级写法
function $(selector) {
	let nodeList = document.querySelectorAll(selector);
	if (nodeList.length === 0) {
		// 伪数组长度为0,没有查询到节点,给一个warn()的提醒
		return console.warn(`${selector}没有获取到节点`);
	}
	if (nodeList.length === 1) {
		// 伪数组长度为1,即查询到的是单个节点,则直接将索引为0的元素取出
		return nodeList[0];
	}
	if (nodeList.length > 1) {
		//伪数组长度大于1,即查询到的是多个节点,则直接返回节点列表
		return nodeList;
	}
}

// 封函数

//因为主体tab栏要反复调用渲染,所以可以封装函数来,复用封函数
//1.实现基本功能
//2.确定函数名-tab()
//3.确定函数参数-tabSelector,tabClassName, contentSelector,contentClassName
//4.确定函数返回值-不需要
//5.将功能代码放进函数壳子
function tab(tabSelector, tabClassName, contentSelector, contentClassName) {
	//1.获取相关节点
	// $("#APIContList li")
	// 2.给每个li绑定点击事件
	$(tabSelector).forEach(function (v, i) {
		v.addEventListener("click", function () {
			// 3.先排他,移出所有的激活样式
			$(tabSelector).forEach(function (item, index) {
				item.classList.remove(tabClassName);
				// 通过对应的索引让卡片内容消失
				if (contentSelector) {
					$(contentSelector)[index].classList.remove(contentClassName);
				}
			});
			// 4.再给自己增加激活样式
			this.classList.add(tabClassName);
			//功能五:点击tab显示对应的内容
			//1.获取相关节点
			// $("#contentLt div");
			//2.让所有的卡片内容消失
			//3.点击li通过对应的索引显示对应卡片的内容
			if (contentSelector) {
				$(contentSelector)[i].classList.add(contentClassName);
			}
		});
	});
}
//6.调用测试

//7.优化代码
